<div id="main">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel2">仓库之间调货的时间</h4>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover ntTable">
                    <tbody>
                    <tr>
                        <td>仓库1<span class="required"></span></td>
                        <td style="width: 24%;">
                            <select class="form-control" id="fromname" v-model="warehouse_id">
                                <option value="">{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in onedata">{{item.name}}</option>
                            </select>
                        </td>
                        <td>仓库2<span class="required"></span></td>
                        <td style="width: 24%;">
                            <select id="leavename" class="form-control" v-model="warehouse_target_id">
                                <option value="">{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in twodata">{{item.name}}</option>
                            </select>
                        </td>
                        <td>天数<span class="required"></span></td>
                        <td style="width: 14%;">
                            <input type="text" v-model="days" class="form-control text-right">
                        </td>
                        <td class="text-right">
                            <button @click="addfunc" class="btn btn-primary"><span
                                    class="glyphicon glyphicon-plus"></span> 添加
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover ntTable">
                    <thead>
                    <tr>
                        <th>仓库1</th>
                        <th>仓库2</th>
                        <th>时间</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in cangkulist" v-if="cangkulist.length>0">
                        <td>{{item.fromname}}</td>
                        <td>{{item.leavename}}</td>
                        <td>{{item.days}}</td>
                        <td class="text-right">
                            <button class="btn btn-sm btn-primary" @click="editfun(index)">
                                <span class="glyphicon glyphicon-pencil"></span>编辑
                            </button>
                            <button class="btn btn-sm btn-default" @click="delitem(index)">
                                <span class="glyphicon glyphicon-trash"></span>删除
                            </button>
                        </td>
                    </tr>
                    <tr style="text-align: center;" v-if="cangkulist.length==0">
                        <td colspan="4" class="no_date">{:lang('no_data')}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span
                class="glyphicon glyphicon-remove"></span>取消
        </button>
        <button type="button" @click="subfun" :disabled="isdisadble" class="btn btn-primary" style="padding-left:24px;padding-right:24px"><span
                class="glyphicon glyphicon-floppy-disk"></span>保存
        </button>
    </div>
    <input type="hidden" name="id" id="id" value="{$id|default=''}">
</div>
<script>
    new Vue({
        el: '#main',
        data: () => ({
            isdisadble: false,
            onedata: [],//仓库
            twodata: [],//仓库
            cangkulist: [],
            days: '1',
            warehouse_id: '',
            warehouse_target_id: '',
            target_ids: [],
            indexedit: 'a',
            isex: '1',
        }),
        methods: {
            //保存数据
            subfun(){
                this.isdisadble=true;
                $.ajax({
                    url: '/admin/warehouses/setingroot',
                    data: {
                        setingsub: '',
                        cangkulist: this.cangkulist,
                        warehouse_id: $('#id').val(),
                    },
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert', data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + data.msg + '<br>')
                        } else {
                            change_mes_type('#headeralert', data.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*' + data.msg + '<br>')
                            $('#distance_editModal').modal('hide');
                        }
                        this.isdisadble=false;
                    }
                })
            },
            //进入的数据
            getalldata(){
                $('.loding').show();
                $.ajax({
                    url: '/admin/warehouses/setingroot?id=' + $('#id').val() + "&setingroot",
                    type: 'post',
                    dataType: 'json',
                    success: (data) => {
                        this.warehouse_id = $('#id').val();
                        this.onedata = data.onedata;
                        this.twodata = data.twodata;
                        this.cangkulist = data.resdata
                        $('.loding').hide();
                    }
                })
            },
            //删除
            delitem(index){
                this.indexedit = 'a';
                this.isex = '1';
                this.cangkulist.splice(index, 1);
            },
            //编辑
            editfun(index){
                this.warehouse_id = $('#id').val(),
                    this.warehouse_target_id = this.cangkulist[index].warehouse_target_id
                this.days = this.cangkulist[index].days
                this.indexedit = index
                this.isex = '1';
            },
            //添加
            addfunc(){
                if (!this.warehouse_target_id || !this.days) {
                    change_mes_type('.modal-body .alert', 2)
                    $('.modal-body .alert').show()
                    $('.modal-body .alert p').html('*数据不完整' + '<br>')
                } else {
                    if (this.indexedit >= 0 && this.indexedit != 'a') {
                        //编辑之前的仓库id
                        let targeteditid = this.cangkulist[this.indexedit]['warehouse_target_id'];
                        if (targeteditid != this.warehouse_target_id) {
                            //编辑成其他的仓库
                            $.each(this.cangkulist, (key, value) => {
                                if (value.warehouse_target_id == this.warehouse_target_id) {
                                    change_mes_type('.modal-body .alert', 3)
                                    $('.modal-body .alert').show()
                                    $('.modal-body .alert p').html('*编辑的仓库已经存在' + '<br>');
                                    this.isex = '2';
                                }
                            });
                            if (this.isex == '2') {
                                this.isex = '1';
                                return false;
                            }
                            //改变的是其他仓库，不存在列表中
                            if (this.isex == '1') {
                                this.cangkulist[this.indexedit]['warehouse_target_id'] = this.warehouse_target_id;
                                this.cangkulist[this.indexedit]['leavename'] = $("#leavename").find("option:selected").text();
                            }
                        }
                        //这个表示编辑的仓库还是原来的仓库
                        this.cangkulist[this.indexedit]['days'] = this.days;
                        this.warehouse_target_id = '';
                    } else {
                        //获取最新的列表的仓库2id
                        this.listcangkutwo();
                        let isexit = this.target_ids.findIndex(item => item == this.warehouse_target_id);
                        //添加
                        if (isexit >= 0) {
                            //添加时，添加的仓库2，存在列表,覆盖操作
                            $.each(this.cangkulist, (key, value) => {
                                if (value.warehouse_target_id == this.warehouse_target_id) {
                                    this.cangkulist[key]['days'] = this.days;
                                }
                            });
                        } else {
                            //不存在（追加）
                            this.cangkulist.push({
                                id: '',
                                fromname: $("#fromname").find("option:selected").text(),
                                warehouse_id: this.warehouse_id,
                                leavename: $("#leavename").find("option:selected").text(),
                                warehouse_target_id: this.warehouse_target_id,
                                days: this.days
                            });
                        }
                    }
                    change_mes_type('.modal-body .alert', 1)
                    $('.modal-body .alert').show()
                    $('.modal-body .alert p').html('*添加成功' + '<br>')
                    this.warehouse_target_id = '';
                    this.days = '1';
                    this.indexedit = 'a';
                    this.isex = '1';
                }
            },
            //获取最新的列表仓库2id
            listcangkutwo(){
                //清空之前的数据
                this.target_ids=[];
                this.cangkulist.forEach((element, index) => {
                    this.target_ids.push(element.warehouse_target_id)
                })
            }
        },
        created() {
            this.getalldata()
        }
    })
</script>